<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="queryData"
				:model="queryData"
				label-width="100px"
				label-suffix=":"
				:inline="true"
			>
				<div>伙牌初筛</div>
				<el-divider></el-divider>
				<el-form-item label="会员账号">
					<el-input
						v-model.trim="queryData.userName"
						v-input="{ name: 'noEmpty' }"
						clearable
						style="width: 210px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item label="查询时间">
					<el-date-picker
						v-model="queryTime"
						type="daterange"
						range-separator="-"
						:start-placeholder="
							$t('dxn.card_ables_list.start_time')
						"
						:end-placeholder="$t('dxn.card_ables_list.end_time')"
						format="yyyy-MM-dd"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						:clearable="false"
						align="right"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="盈利率（%）">
					<el-input
						v-model="queryData.startNetRate"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="startNetRate"
						clearable
						@blur="
							handleAmount(
								queryData,
								1,
								'startNetRate',
								'endNetRate',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="queryData.endNetRate"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="endNetRate"
						clearable
						@blur="
							handleAmount(
								queryData,
								2,
								'startNetRate',
								'endNetRate',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item label="总盈利">
					<el-input
						v-model="queryData.startNetAmount"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="startNetAmount"
						clearable
						@blur="
							handleAmount(
								queryData,
								1,
								'startNetAmount',
								'endNetAmount',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="queryData.endNetAmount"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'onlyTwoNum' }"
						name="endNetAmount"
						clearable
						@blur="
							handleAmount(
								queryData,
								2,
								'startNetAmount',
								'endNetAmount',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						:disabled="loading"
						@click="handleReset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90570051')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:disabled="loading || exportLoading"
						:loading="exportLoading"
						@click="handleExport"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870098')"
						type="success"
						icon="el-icon-sort"
						size="medium"
						@click="showColumnSet"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="refTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%;"
				:max-height="tableHeight"
				highlight-current-row
				header-align="center"
				:header-cell-style="getRowClass"
				@sort-change="handleTableSort"
			>
				<el-table-column
					type="index"
					label="序号"
					width="80"
					align="center"
				/>

				<el-table-column
					align="center"
					label="会员账号"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					align="center"
					label="总盈利"
					min-width="180"
					show-overflow-tooltip
					prop="netAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netAmount)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.netAmount
								)
							}}
						</span>
					</template>
				</el-table-column>

				<el-table-column
					v-if="tableColumnData[tableColumns.betAmount]"
					align="center"
					label="总投注"
					min-width="180"
					show-overflow-tooltip
					prop="betAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.betAmount
								)
							}}
						</span>
					</template>
				</el-table-column>

				<el-table-column
					v-if="tableColumnData[tableColumns.netRate]"
					align="center"
					label="盈利率"
					min-width="180"
					show-overflow-tooltip
					prop="netRate"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netRate)">
							{{ scope.row.netRate + '%' }}
						</span>
					</template>
				</el-table-column>

				<el-table-column
					v-if="tableColumnData[tableColumns.bringPoolRate]"
					align="center"
					label="入池率 VPIP"
					min-width="180"
					show-overflow-tooltip
					prop="bringPoolRate"
				>
					<template slot-scope="scope">
						{{ scope.row.bringPoolRate + '%' }}
					</template>
				</el-table-column>

				<el-table-column
					v-if="tableColumnData[tableColumns.preFlopRaiseRate]"
					align="center"
					label="翻牌前加注率 PFR"
					min-width="180"
					show-overflow-tooltip
					prop="preFlopRaiseRate"
				>
					<template slot-scope="scope">
						{{ scope.row.preFlopRaiseRate + '%' }}
					</template>
				</el-table-column>

				<el-table-column align="center" label="操作" width="120">
					<template slot-scope="scope">
						<span
							class="text-link"
							@click="
								handleJump(
									{
										path:
											'/dxn/riskManager/partnerCardRefined'
									},
									scope.row.userName
								)
							"
						>
							伙牌精筛
						</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</template>
		<TableColumnSet
			v-if="colSettings.visible"
			:visible.sync="colSettings.visible"
			:dialogColumnData="dialogColumnData"
			:activityListField="activityListField"
			@submitColumnSet="submitColumnSet"
			@choiceColumnSet="choiceColumnSet"
		></TableColumnSet>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import dayjs from 'dayjs'
import { tableColumns } from './components/tableColumn'
import TableColumnSet from '@/components/Dxn/TableColumnSet'
import dxnMixin from '@/mixins/dxnMixin'
const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')
export default {
	name: routerNames.partnerCardSift,
	components: {
		TableColumnSet,
		MainContent
	},
	mixins: [list, dxnMixin],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			dataList: [],
			exportLoading: false,
			loading: false,
			queryData: {
				userName: undefined,
				startNetRate: undefined,
				endNetRate: undefined,
				startNetAmount: undefined,
				endNetAmount: undefined
			},
			numberFieldList: [
				'startNetRate',
				'endNetRate',
				'startNetAmount',
				'endNetAmount'
			],
			queryTime: [start(), end()],
			tableColumns
		}
	},
	created() {
		this.initIndexDB('partnerCardSift', this.activityListField)
	},
	methods: {
		handleJump(obj, userName) {
			obj.query = {
				...this.queryData,
				userName,
				startDate: dayjs(this.queryTime[0]).format('YYYY-MM-DD'),
				endDate: dayjs(this.queryTime[1]).format('YYYY-MM-DD')
			}
			this.$router.push(obj)
		},
		getSearchParams() {
			const queryTime = this.queryTime || []
			const params = {
				...this.queryData,
				startTimestamp: queryTime[0]
					? dayjs(queryTime[0]).valueOf()
					: undefined,
				endTimestamp: queryTime[1]
					? dayjs(queryTime[1]).valueOf()
					: undefined
			}
			Object.keys(params).forEach((key) => {
				if (params[key] === '') {
					params[key] = undefined
				} else if (
					this.numberFieldList.indexOf(key) > -1 &&
					isNaN(params[key])
				) {
					params[key] = undefined
				}
			})
			return params
		},
		loadData() {
			this.loading = true
			this.dataList = []
			const params = this.getParams(this.getSearchParams())
			this.$api
				.getPartnerCardBeginSiftBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record || []
						this.total = res?.data?.totalRecord || 0
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSearch() {
			this.clearTableSort()
			this.pageNum = 1
			this.loadData()
		},
		handleReset() {
			this.clearTableSort()
			this.pageNum = 1
			this.queryTime = [start(), end()]
			Object.keys(this.queryData).forEach((key) => {
				this.queryData[key] = undefined
			})
			this.loadData()
		},
		handleExport() {
			const params = this.getParams(this.getSearchParams())
			this.deleteExportParams(params)
			this.exportLoading = true
			this.exportExcelPublic({
				api: 'exportPartnerCardBeginSiftBend',
				params
			}).finally(() => {
				this.exportLoading = false
			})
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
.rule-form {
	margin: 15px 30px;
	.status-lable {
		line-height: 1.2;
	}
}
</style>
